<template>
	<div class="mainbody">
		<div class="location">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item>
					<i class="iconfont icon-home"></i>
					管理中心
				</el-breadcrumb-item>
				<el-breadcrumb-item>订单管理</el-breadcrumb-item>
				<el-breadcrumb-item>订单列表</el-breadcrumb-item>
			</el-breadcrumb>
		</div>

		<div class="toolbar-box" :style="heightToolsBar">
			<div class="list-box">
				<div class="l-list">
					<el-button-group>
						<el-button icon="el-icon-plus" @click="$common.linkUrl('/order/add')">新增</el-button>
						<el-button icon="el-icon-delete" @click="deleteCheckAll">删除</el-button>
					</el-button-group>
				</div>
				<div class="r-list">
					<div class="search-box">
						<el-input placeholder="输入关健字" v-model="keyword" @keyup.enter.native="initData" clearable>
							<el-button slot="append" icon="el-icon-search" @click="initData"></el-button>
						</el-input>
					</div>
					<div class="btn-box">
						<el-button-group>
							<el-button :icon="iconToolsBar" @click="toggleToolsBar"></el-button>
						</el-button-group>
					</div>
				</div>
			</div>

			<div class="more-box">
				<dl>
					<dt>查找商户</dt>
					<dd>
						<el-select v-model="merchantId" filterable remote default-first-option  clearable
							:remote-method="loadMerchant" @change="initData" placeholder="请选择...">
							<el-option v-for="item in merchantList"
								:key="item.id"
								:label="item.title"
								:value="item.id">
							</el-option>
						</el-select>
					</dd>
				</dl>
				<dl>
					<dt>订单类型</dt>
					<dd>
						<el-select v-model="orderType" @change="initData" placeholder="请选择...">
							<el-option label="全部类型" :value="-1"></el-option>
							<el-option label="普通订单" :value="0"></el-option>
							<el-option label="限时抢购" :value="1"></el-option>
							<el-option label="商品预售" :value="2"></el-option>
							<el-option label="积分换购" :value="3"></el-option>
						</el-select>
					</dd>
				</dl>
				<dl>
					<dt>订单状态</dt>
					<dd>
						<el-select v-model="status" placeholder="请选择" @change="initData">
							<el-option label="全部状态" :value="0"></el-option>
							<el-option label="等待付款" :value="1"></el-option>
							<el-option label="等待发货" :value="2"></el-option>
							<el-option label="等待收货" :value="3"></el-option>
							<el-option label="签收完成" :value="4"></el-option>
							<el-option label="交易完成" :value="5"></el-option>
							<el-option label="订单取消" :value="6"></el-option>
							<el-option label="订单作废" :value="7"></el-option>
						</el-select>
					</dd>
				</dl>
				<dl>
					<dt>支付方式</dt>
					<dd>
						<el-select v-model="paymentId" placeholder="请选择..." @change="initData">
							<el-option :key="0" label="全部支付" :value="0"></el-option>
							<el-option v-for="item in paymentList"
								:key="item.id"
								:label="item.title"
								:value="item.id">
							</el-option>
						</el-select>
					</dd>
				</dl>
				<dl>
					<dt>配送方式</dt>
					<dd>
						<el-select v-model="deliveryId" placeholder="请选择..." @change="initData">
							<el-option :key="0" label="全部配送" :value="0"></el-option>
							<el-option v-for="item in deliveryList"
								:key="item.id"
								:label="item.title"
								:value="item.id">
							</el-option>
						</el-select>
					</dd>
				</dl>
				<dl>
					<dt>下单日期</dt>
					<dd>
						<el-date-picker style="width:280px" v-model="dateRange"
							type="daterange"
							value-format="yyyy-MM-dd"
							start-placeholder="开始时间"
							end-placeholder="结束时间"
							@change="initData">
						</el-date-picker>
					</dd>
				</dl>
			</div>
		</div>

		<div class="content-box">
			<el-card class="table-card">
				<el-table ref="multipleTable" v-loading="loading" :data="listData" stripe class="table-list" @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="45"></el-table-column>
					<el-table-column prop="orderNo" label="订单号" min-width="150" show-overflow-tooltip></el-table-column>
					<el-table-column label="店铺名称" width="150">
						<template slot-scope="scope">
							<span class="nowrap">{{scope.row.merchantTitle}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="userName" label="会员账户" width="100" show-overflow-tooltip></el-table-column>
					<el-table-column label="总金额" width="90">
						<template slot-scope="scope">
							<span class="nowrap">{{scope.row.orderAmount}}</span>
						</template>
					</el-table-column>
					<el-table-column label="下单时间" width="150">
						<template slot-scope="scope">
							<span class="nowrap">{{scope.row.addTime}}</span>
						</template>
					</el-table-column>
					<el-table-column label="订单类型" width="90">
						<template slot-scope="scope">
							<el-tag size="small" type="danger" effect="plain" v-if="scope.row.orderType==1">抢购订单</el-tag>
							<el-tag size="small" type="warning" effect="plain" v-else-if="scope.row.orderType==2">预售订单</el-tag>
							<el-tag size="small" type="danger" effect="plain" v-else-if="scope.row.orderType==3">积分换购</el-tag>
							<el-tag size="small" effect="plain" v-else>普通订单</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="支付状态" width="80">
						<template slot-scope="scope">
							<el-tag size="small" type="danger" effect="dark" v-if="scope.row.paymentStatus==1">部分已付</el-tag>
							<el-tag size="small" type="success" effect="dark" v-else-if="scope.row.paymentStatus==2">全额付款</el-tag>
							<el-tag size="small" type="info" effect="dark" v-else>未付款</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="订单状态" width="90">
						<template slot-scope="scope">
							<el-tag size="small" type="info" effect="dark" v-if="scope.row.isDelete==1">已删除</el-tag>
							<el-tag size="small" type="info" effect="dark" v-else-if="scope.row.refundStatus==1">全部退款</el-tag>
							<el-tag size="small" type="warning" effect="dark" v-else-if="scope.row.refundStatus==2">部分退款</el-tag>
							<el-tag size="small" effect="dark" v-else-if="scope.row.status==1">等待付款</el-tag>
							<el-tag size="small" type="danger" effect="dark" v-else-if="scope.row.status==2">等待发货</el-tag>
							<el-tag size="small" type="danger" effect="dark" v-else-if="scope.row.status==3">等待收货</el-tag>
							<el-tag size="small" type="success" effect="dark" v-else-if="scope.row.status==4">签收完成</el-tag>
							<el-tag size="small" type="success" effect="dark" v-else-if="scope.row.status==5">交易完成</el-tag>
							<el-tag size="small" type="info" effect="dark" v-else-if="scope.row.status==6">交易取消</el-tag>
							<el-tag size="small" type="info" effect="dark" v-else-if="scope.row.status==7">交易作废</el-tag>
						</template>
					</el-table-column>
					<el-table-column fixed="right" label="操作" width="130">
						<template slot-scope="scope">
							<el-button size="mini" icon="el-icon-edit" @click="$common.linkUrl('/order/edit/'+scope.row.id)"></el-button>
							<el-button size="mini" icon="el-icon-finished" @click="$common.linkUrl('/order/show/'+scope.row.id)"></el-button>
							<el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteItem(scope.row.id)"></el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-card>

			<div class="pager-box">
				<el-pagination background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="pageIndex"
					:page-sizes="[10, 20, 50, 100]"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="totalCount">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				showToolsBar: false, //显示更多条件选项
				heightToolsBar: 'height:60px', //工具栏高度
				iconToolsBar: 'iconfont icon-d-arrow-down', //更多按钮图标
				loading: false,
				merchantId: null,
				paymentId: 0,
				deliveryId: 0,
				orderType: -1,
				status: 0,
				keyword: '',
				dateRange: [],
				totalCount: 0,
				pageSize: 10,
				pageIndex: 1,
				merchantList: [],
				paymentList: [],
				deliveryList: [],
				listData: [],
				multipleSelection: []
			}
		},
		methods: {
			//初始化工具栏
			initLoad() {
				let _this = this;
				//加载支付列表
				_this.$api.request({
					url: '/admin/payment',
					success(res) {
						_this.paymentList = res.data
					}
				});
				//加载配送列表
				_this.$api.request({
					url: '/admin/shop/delivery',
					success(res) {
						_this.deliveryList = res.data;
					}
				});
				//加载数据
				_this.initData();
			},
			//加载数据
			initData() {
				let _this = this;
				let sendUrl = "/admin/order";
				sendUrl += "?orderType=" + _this.orderType;
				sendUrl += "&status=" + _this.status;
				sendUrl += "&paymentId=" + _this.paymentId;
				sendUrl += "&deliveryId=" + _this.deliveryId;
				sendUrl += "&pageSize=" + _this.pageSize;
				sendUrl += "&pageIndex=" + _this.pageIndex;
				if(_this.merchantId) {
					sendUrl += "&merchantId=" + _this.merchantId;
				}
				if (_this.dateRange.length > 0) {
					sendUrl += "&startTime=" + _this.dateRange[0];
					sendUrl += "&endTime=" + _this.dateRange[1];
				}
				if (_this.keyword.length > 0) {
					sendUrl += "&keyword=" + encodeURI(_this.keyword);
				}
				_this.$api.request({
					url: sendUrl,
					beforeSend() {
						_this.loading = true
					},
					success(res) {
						_this.listData = res.data;
						let pageInfo = JSON.parse(res.headers["x-pagination"]);
						_this.totalCount = pageInfo.totalCount;
						_this.pageSize = pageInfo.pageSize;
						_this.pageIndex = pageInfo.pageIndex;
					},
					error(err) {
						_this.listData = []
					},
					complete() {
						_this.loading = false
					}
				});
			},
			//加载商家列表
			loadMerchant(query) {
				let _this = this;
				_this.$api.request({
					url: `/admin/merchant/view/5?keyword=${encodeURI(query)}`,
					success(res) {
						_this.merchantList = res.data;
					}
				});
			},
			//切换更多查询条件
			toggleToolsBar() {
				this.showToolsBar = !this.showToolsBar
				if (this.showToolsBar) {
					this.heightToolsBar = "height:auto"
					this.iconToolsBar = 'iconfont icon-d-arrow-up'
				} else {
					this.heightToolsBar = "height:60px"
					this.iconToolsBar = 'iconfont icon-d-arrow-down'
				}
			},
			//多选删除
			deleteCheckAll() {
				let _this = this; //当前页面
				//拿到选中的数据
				let list = _this.multipleSelection;
				//检查是否有选中
				if (!list) {
					_this.$message({ type: 'warning', message: '请选择要删除的记录！' });
					return false;
				}
				//执行删除操作
				_this.$confirm('确认要删除该记录吗？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(function () {
					let delIds = [];//创建一个数组
					list.forEach((item, index) => {
						//遍历源数据
						_this.listData.forEach((v, i) => {
							if (item.id == v.id) {
								delIds.push(item.id);
							}
						})
					});
					_this.$api.request({
						method: 'delete',
						url: '/admin/order?ids=' + delIds.toString(),
						loading: true,
						successMsg: '已删除成功',
						success(res) {
							_this.initData(); //重新加载列表
						}
					})
				}).catch(function () { });
			},
			//单项删除
			deleteItem(val) {
				let _this = this; //当前页面
				//执行删除操作
				_this.$confirm('确认要删除该记录吗？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(function () {
					_this.$api.request({
						method: 'delete',
						url: '/admin/order/' + val,
						loading: true,
						successMsg: '已删除成功',
						success(res) {
							_this.initData();//重新加载列表
						}
					});

				}).catch(function () { });

			},
			//选中第几行
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			//每页显示数量
			handleSizeChange(val) {
				if (this.pageSize != val) {
					this.pageSize = val;
					this.initData();
				}
			},
			//跳转到第几页
			handleCurrentChange(val) {
				if (this.pageIndex != val) {
					this.pageIndex = val;
					this.initData();
				}
			},
		},
		created() {
			this.initLoad();
		}
	}
</script>